<!DOCTYPE html>
<script src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script>
<script>
    var ecco_url = 'http://localhost:8000/ecco/'


    requirejs.config({
        urlArgs: "bust=" + (new Date()).getTime(),
        paths: {
            d3: "https://d3js.org/d3.v5.min",
            jquery: "https://code.jquery.com/jquery-3.5.1.min",
            ecco: ecco_url + 'ecco'
        }
    });

    requirejs(['jquery', 'd3', 'ecco'],
        function ($, d3, ecco) {

        d3.select('#css').attr('href',  ecco_url+ 'html/styles.css')
            console.log("inside!!!")

            var current_neuron = 0

            function visualize() {

                ecco.neuronTextExplorable(
                    '#viz',
                    window.params['tokens'],
                    window.params['activations'],
                    current_neuron
                )

                // Update Neuron Number
                d3.select('#neuron-number')
                    .text((1 + current_neuron))


                // Update Layer Number
                d3.select('#layer-number')
                    .text(window.params['layer'])

            }


            // Previous Neuron Button
            d3.select('#prev-neuron').on('click', function () {
                if (current_neuron == 0) {
                    current_neuron = window.params['activations'].length - 1
                } else
                    current_neuron--
                visualize()
            })

            // Next Neuron Button
            d3.select('#next-neuron').on('click', function () {

                if (current_neuron == window.params['activations'].length - 1) {
                    current_neuron = 0
                } else
                    current_neuron++

                visualize()
            })

            // Random Neuron Button
            d3.select('#random-neuron').on('click', function () {
                const max = window.params['activations'].length - 1
                current_neuron = Math.floor(Math.random() * max)
                visualize()
            })


            visualize()
        }, function (err) {
            console.log(err);
        }
    )


</script>
<html lang="en">
<head>
    <link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
    <link id='css' rel="stylesheet"  type="text/css" >
    <meta charset="UTF-8">
    <title>Heatmap</title>

</head>
<body>
<div id="text-explorable">
    <button id="prev-neuron" class="exp-btn">Previous</button>
    <button id="next-neuron" class="exp-btn">Next</button>
    <button id="random-neuron" class="exp-btn">Random</button>

    Layer #<span id='layer-number'></span> |
    <span id="neuron-or-cluster">Neuron</span> #<span id='neuron-number'></span> |

    <div id="viz"></div>
</div>
</body>
</html>